<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script> 
window.STATIC_URL = '{{ STATIC_URL }}'; 
</script> 
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> -->
<script src="{{ STATIC_URL }}js/vendor/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}js/vendor/handlebars.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}js/vendor/ember-1.0.0-rc.1.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}js/vendor/ember-data.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}js/vendor/tastypie_serializer.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}js/vendor/tastypie_adapter.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}js/sectors.js" type="text/javascript"></script>

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>Beautiful advanced jQuery background image slideshow</title>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/script.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/sectors.js"></script>
</head>
<body>
<div id="header">
    <!-- jQuery handles to place the header background images -->
    <div id="headerimgs">
        <div id="headerimg1" class="headerimg"></div>
        <div id="headerimg2" class="headerimg"></div>
    </div>
    <!-- Top navigation on top of the images -->
    <div id="nav-outer">
        <div id="navigation">
            <div id="search">
                <form>
                    <input type="text" id="searchtxt" />
                    <input type="submit" value="search" id="searchbtn" />
                </form>
            </div>
            <div id="menu">
                <ul>
                    <li><a href="http://www.marcofolio.net/">Marcofolio</a></li>
                    <li><a href="http://www.twitter.com/marcofolio">Twitter</a></li>
                    <li><a href="http://feeds2.feedburner.com/marcofolio">RSS</a></li>
                    <li><a href="http://jquery.com/">jQuery</a></li>
                    <li><a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a></li>
                    <li><a href="http://buysellads.com/buy/detail/956">Advertisements</a>
                </ul>
            </div>
        </div>
    </div>
    <!-- Slideshow controls -->
    <div id="headernav-outer">
        <div id="headernav">
            <div id="back" class="btn"></div>
            <div id="control" class="btn"></div>
            <div id="next" class="btn"></div>
        </div>
    </div>
    <!-- jQuery handles for the text displayed on top of the images -->
    <div id="headertxt">
        <p class="caption">
            <span id="firstline"></span>
            <a href="#" id="secondline"></a>
        </p>
        <p class="pictured">
            Pictured:
            <a href="#" id="pictureduri"></a>
        </p>
    </div>
</div>

{% verbatim %}
    <script type="text/x-handlebars">
        // <ul id="menu">
        //     <li><a href="#">Home</a></li>
        //     <li>
        //         <a href="#">Categories</a>
        //         <ul>
        //             <li><a href="#">CSS</a></li>
        //             <li><a href="#">Graphic design</a></li>
        //             <li><a href="#">Development tools</a></li>
        //             <li><a href="#">Web design</a></li>
        //         </ul>
        //     </li>
        //     <li><a href="#">Work</a></li>
        //     <li><a href="#">About</a></li>
        //     <li><a href="#">Contact</a></li>
        // </ul>

        <h1>Ember.js Showcase Sectors App</h1>
        <nav>
            {{#linkTo sectors-list}}Sectors{{/linkTo}} |
            {{#linkTo add-sector}}Add sector{{/linkTo}} |
            {{#linkTo about}}About{{/linkTo}} |
            {{#linkTo contact}}Contact{{/linkTo}}
        </nav>
        {{outlet}}
    </script>
    <script type="text/x-handlebars" data-template-name="sectors-list">
        holanda
        {{#each sector in sectors}}
            <article>
                {{sector.sector}}
                <p>Added by: {{ sector.poster.username }}</p>
            </article>
        {{/each}}
    </script>
{% endverbatim %}

</body>

</html>
<!-- 

<!doctype html>
<html>
<head>
    <title>Ember.js showcase</title>
    <meta charset="utf-8"/>
    <script src="{{ STATIC_URL }}js/vendor/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}js/vendor/handlebars.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}js/vendor/ember-1.0.0-rc.1.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}js/vendor/ember-data.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}js/vendor/tastypie_serializer.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}js/vendor/tastypie_adapter.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}js/sectors.js" type="text/javascript"></script>

    <style>
        article {
            border: 1px solid #eee;
            padding: 3px;
            margin-bottom: 3px;
            font-size: 12px;
        }
        p {
            margin: 0px;
            font-style: italic;
        }
        .active {
            color: red;
        }
        nav {
            background-color: #EEE;
            padding: 4px;
            margin-bottom: 4px;
        }
    </style>
</head>

<link rel="stylesheet" href="{{ STATIC_URL }}css/index.css">

<body>
{% verbatim %}
    <script type="text/x-handlebars">
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">Categories</a>
                <ul>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">Graphic design</a></li>
                    <li><a href="#">Development tools</a></li>
                    <li><a href="#">Web design</a></li>
                </ul>
            </li>
            <li><a href="#">Work</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        // <h1>Ember.js Showcase Sectors App</h1>
        <nav>
            {{#linkTo sectors-list}}Sectors{{/linkTo}} |
            {{#linkTo add-sector}}Add sector{{/linkTo}} |
            {{#linkTo about}}About{{/linkTo}} |
            {{#linkTo contact}}Contact{{/linkTo}}
        </nav>
        {{outlet}}
    </script>
    <script type="text/x-handlebars" data-template-name="sectors-list">
        holanda
        {{#each sector in sectors}}
            <article>
                {{sector.sector}}
                <p>Added by: {{ sector.poster.username }}</p>
            </article>
        {{/each}}
    </script>
    <script type="text/x-handlebars" data-template-name="about">
        <h2>About the application</h2>
        <p>This application rocks!</p>
    </script>
    <script type="text/x-handlebars" data-template-name="contact">
        <h2>Contact</h2>
        <p>Call Houston in case of troubles.</p>
    </script>
    <script type="text/x-handlebars" data-template-name="add-sector">
        <h2>Add a sector</h2>
        <form>
            {{view Ember.TextField valueBinding="sector" placeholder="Add a sector"}}
        </form>
    </script>
{% endverbatim %}
</body>
</html>
 -->